<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Router Query Params Demo</title>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/vue-router.js"></script>
    <style>
        .active {
            color: red;
        }
        .fade-enter-active, .fade-leave-active {
            transition: all 0.5s ease;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
            transform: translateX(200%);
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <p>
            <router-link to="/cell?id=123&name=张某" active-class="active">牢房 1</router-link>
            <router-link to="/cell?id=456&name=李某" active-class="active">牢房 2</router-link>
        </p>
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
    
    <script>
        // 组件
        var Cell = {
            template: `
                <div>
                    <h2>嫌疑人 {{ $route.query.name }}</h2>
                    <p>信息：{{ cellInfo }}</p>
                </div>
            `,
            data() {
                return {
                    cellInfo: ''
                };
            },
            watch: {
                '$route.query': 'fetchCellInfo' // 监听路由查询参数的变化
            },
            created() {
                this.fetchCellInfo();
            },
            methods: {
                fetchCellInfo() {
                    this.cellInfo = '嫌疑人 ' + this.$route.query.name + ' (ID: ' + this.$route.query.id + ') 因破坏学校信息系统被抓';
                }
            }
        };
        
        // 实例化路由
        var router = new VueRouter({
            routes: [
                {
                    path: '/cell',
                    component: Cell
                }
            ]
        });
        
        // 实例化 Vue
        var vm = new Vue({
            el: '#app',
            router: router,
            data: {
                message: '广西监狱牢房管理系统'
            }
        });
    </script>
</body>
</html>